import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')
/*
# 声明式导航传参

导航传递参数就是在跳转路由的时候进行传值

## query参数

```vue
<template>
  <div id="app">
    <ul>
      <!-- 向跳转的路由组件传递query参数 -->
      <li><router-link :to="{path:'/home',query:{name:'首页'}}">首页</router-link></li>
      <li><router-link :to="{path:'/product',query:{name:'购物车'}}">购物车</router-link></li>
      <li><router-link :to="{path:'/my-music',query:{name:'我的音乐'}}">我的音乐</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>
```

```vue
<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "home"
})
</script>

<template>
<div class="home">
  <p>我是首页</p>
  <!--使用$route.query接收传递过来的query参数-->
  <!--在组件的逻辑script中需要使用this.$route.query获取query参数-->
  <h1>{{$route.query.name}}</h1>
</div>
</template>
```

## params参数

```vue
<template>
  <div id="app">
    <ul>
      <!-- 向跳转的路由组件传递params参数 -->
      <li><router-link :to="{name:'home',params:{key:'首页'}}">首页</router-link></li>
      <li><router-link :to="{name:'product',params:{key:'购物车'}}">购物车</router-link></li>
      <li><router-link :to="{name:'my-music',params:{key:'我的音乐'}}">我的音乐</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>
```

```vue
<script>
import {defineComponent} from 'vue'
export default defineComponent({
  name: "home"
})
</script>

<template>
<div class="home">
  <p>我是首页</p>
  <!--使用$route.params接收传递过来的params参数-->
  <!--在组件的逻辑script中需要使用this.$route-.params获取params参数-->
  <h1>{{$route.params.key}}</h1>
</div>
</template>
```

```javascript
const routes = [
    {path: "/home/:key", name:"home", component: home},
    {path: "/product/:key",  name:"product",component: product},
    {path: "/my-music/:key",name:"my-music", component: myMusic}
]

```



# 编程式导航传参

## query参数

```vue
<template>
  <div id="app">
    <button @click="goPage('1')">首页</button>
    <button @click="goPage('2')">购物车</button>
    <button @click="goPage('3')">我的音乐</button>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    goPage(page) {
      if (page === "1") {
        // this.$router.push({path:"/home",query:{name:"首页"}})
        this.$router.replace({path: "/home", query: {name: "首页"}})
      } else if (page === "2") {
        // this.$router.push({path:"/product",query:{name:"购物车"}})
        this.$router.replace({path: "/product", query: {name: "购物车"}})
      } else {
        // this.$router.push({path:"/my-music",query:{name:"我的音乐"}})
        this.$router.replace({path: "/my-music", query: {name: "我的音乐"}})
      }
    }
  }
}
</script>
```

## params参数

```vue
<template>
  <div id="app">
    <button @click="goPage('1')">首页</button>
    <button @click="goPage('2')">购物车</button>
    <button @click="goPage('3')">我的音乐</button>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    goPage(page) {
      if (page === "1") {
        // this.$router.push({name:"home",params:{name:"首页"}})
        this.$router.replace({name: "home", params: {name: "首页"}})
      } else if (page === "2") {
        // this.$router.push({name: "product",params:{name:"购物车"}})
        this.$router.replace({name: "product", params: {name: "购物车"}})
      } else {
        // this.$router.push({name: "my-music",params:{name:"我的音乐"}})
        this.$router.replace({name: "my-music", params: {name: "我的音乐"}})
      }
    }
  }
}
</script>
```


* */